import React, { useState, useEffect } from 'react';
import { Card, Descriptions, message, Spin } from 'antd';
import axios from '../utils/axios';
import { API } from '../api';

interface User {
  id: number;
  username: string;
  email: string;
  createdAt: string;
  updatedAt: string;
}

const UserProfile: React.FC = () => {
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(false);

  const fetchUserProfile = async () => {
    try {
      setLoading(true);
      // 从 localStorage 获取当前用户名
      const username = localStorage.getItem('username');
      if (!username) {
        message.error('未找到用户信息');
        return;
      }
      
      const response = await axios.get(API.user.getUser(username));
      setUser(response.data);
    } catch (error) {
      message.error('获取用户信息失败');
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchUserProfile();
  }, []);

  if (loading) {
    return (
      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
        <Spin size="large" />
      </div>
    );
  }

  if (!user) {
    return null;
  }

  return (
    <div style={{ padding: '24px' }}>
      <Card title="个人信息" bordered={false}>
        <Descriptions column={1}>
          <Descriptions.Item label="用户名">{user.username}</Descriptions.Item>
          <Descriptions.Item label="邮箱">{user.email}</Descriptions.Item>
          <Descriptions.Item label="注册时间">
            {new Date(user.createdAt).toLocaleString()}
          </Descriptions.Item>
          <Descriptions.Item label="最后更新">
            {new Date(user.updatedAt).toLocaleString()}
          </Descriptions.Item>
        </Descriptions>
      </Card>
    </div>
  );
};

export default UserProfile; 